<script setup lang="ts">
// vue
import { defineModel, ref, type Ref } from "vue";
// primevue
import { Button, Dialog } from "primevue";
// vditor
import Vditor from "vditor";

const editor: Ref<Vditor | null> = ref(null);
const isModalShown = defineModel() as Ref<boolean>;

function loadMarkdownContent(): string {
  return (
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
    "Mauris eget urna nec nunc ultrices ultrices. " +
    "Donec eget urna nec nunc ultrices ultrices."
  );
}

function handleOkClick() {
  isModalShown.value = false;
}

function handleCancelClick() {
  isModalShown.value = false;
}

function handleShow() {
  editor.value = new Vditor("mde-point", {
    minHeight: 320,
    toolbarConfig: {
      pin: true
    },
    preview: {
      hljs: {
        lineNumber: true
      },
      maxWidth: 2147483647
    },
    after: () => {
      editor.value?.setTheme(
        "dark",
        "dark",
        "atom-one-dark"
      );
      // 假装装入数据
      editor.value?.setValue(loadMarkdownContent());
    }
  });
}

function handleHide() {
  let mdContent = editor.value?.getValue();
  console.log("content =", mdContent);
  editor.value?.destroy();
}
</script>

<template>
  <Dialog v-model:visible="isModalShown" modal @after-hide="handleHide"
    @show="handleShow" header="Bruh!">
    <div id="mde-point"></div>
    <div class="sticky-buttons">
      <Button severity="danger" @click="handleOkClick">
        <i class="bi bi-x-circle"></i>
      </Button>
      <Button severity="success" @click="handleCancelClick">
        <i class="bi bi-check2-circle"></i>
      </Button>
    </div>
  </Dialog>

</template>

<style scoped>
.sticky-buttons {
  position: sticky;
  bottom: 0;
  margin: 1em 0.5em 0 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}
</style>